/* eslint-disable @typescript-eslint/no-explicit-any */
import { Allotment } from 'allotment';
import 'allotment/dist/style.css';
import { Header } from '../components/Header/Header';
import { EditArea } from '../components/EditArea/EditArea';
// import { Material } from '../components/Material/Material';
import { MaterialWrapper } from '../components/Material/Wrapper';
import { Setting } from '../components/Settings/Settings';
import { Preview } from '../components/Preview';
import { useComponetsStore } from '../store/components';


//布局
export default function ReactPlayground() {
    const { mode } = useComponetsStore();

    return <div className='h-[100vh] flex flex-col'>
        <div className='h-[60px] flex items-center border-b-[1px] border-[#000]'>
            <Header />
        </div>
        <div className='flex-grow'>
            {   mode==='edit' ?
                    <Allotment className='h-full'>
                        {/* 设置各个面板的初始size，最大、最小size */}
                        {/* 左边的面板 用来放大纲，可选组件，json树*/}
                        <Allotment.Pane preferredSize={240} maxSize={300} minSize={200}>
                            <MaterialWrapper />
                        </Allotment.Pane>
                        {/* 中间的面板 编辑画布*/}
                        <Allotment.Pane>
                                <EditArea />
                        </Allotment.Pane>
                        {/* 右边的面板 设置组件的属性*/}
                        <Allotment.Pane preferredSize={300} maxSize={500} minSize={300}>
                                <Setting />
                        </Allotment.Pane>
                    </Allotment>
                : <Preview />
            }
        </div>
        
    </div>
}